<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>订单成本汇总</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="orderCostGlasses">
      <search-btn-view btn-text="订单查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="exportExcel">导出excel</el-button>
        </template>
        <template slot="right">
          <table-col-show-select v-if="tableHideColumnKey!==null" :table-name="tableName" :current-column-name="currentColumnName"
            :hide-column.sync="tableHideColumnKey">
          </table-col-show-select>
        </template>
        <div slot="search-content">
          <sys-common-search :search="search" request-url="orderCostFlasses/getOrderIdList"
            :search-field="['orderId','companyOrderId','factoryNo','customerNo']" label-width="100px" input-width="160px">
          </sys-common-search>
        </div>
      </search-btn-view>
      <div class="orderCostGlasses-table-div">
        <el-table fit stripe border ref="orderCostStat" :data="orderCostGlassesList" @row-click="getOrderLineDetail" style="width:100%"
          height="parent" :hide-column-keys="getTableHideColumns()">
          <el-table-column prop="companyOrderId" key="companyOrderId" label="订单编号" min-width="140px" header-align="center"></el-table-column>
          <el-table-column prop="factoryId" key="factoryId" label="工厂型号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="customerId" key="customerId" label="客户型号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="lineNo" key="lineNo" label="订单序号" min-width="75px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.lineNo==='-1'?globalConfig.orderDefaultRowIndex:scope.row.lineNo}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="feedTotal" key="feedTotal" label="订单投料数" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="feedCount" key="feedCount" label="物料用料数" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="orderTotal" key="orderTotal" label="订单数" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="glassesMoney" key="glassesMoney" label="投料成本" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="glassesOrderMoney" key="glassesOrderMoney" label="订单成本" min-width="100px" align="center"></el-table-column>
          <el-table-column column-key="yuCost" key="yuCost" label="预计人工" min-width="100px" align="center">
            <template slot-scope="scope">
              <span v-if=" scope.row.yuCost==0.0">未设置</span>
              <span v-else>{{scope.row.yuCost.toFixed(4)}}</span>
            </template>
          </el-table-column>
          <el-table-column column-key="peopleCost" key="peopleCost" label="实际人工" min-width="100px" align="center">
            <template slot-scope="scope">
              <span v-if=" scope.row.peopleCost==0.0">未生产</span>
              <span v-else>{{scope.row.peopleCost.toFixed(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="managerCost" key="managerCost" label="管理成本" min-width="80px" align="center"></el-table-column>
        </el-table>
      </div>
      <div style="margin-top:5px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog title="订单成本明细" :visible.sync="diaLogIsShow" top="10vh" width="80%">
      <div style="height:calc(80vh - 54px);overflow:auto">
        <order-cost-glasses-form v-if="diaLogIsShow" :order-line-detail="orderLineDetail"></order-cost-glasses-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20190523111638xlsx.full.min.js"></script>
<script src="https://upload.shinehao.com.cn/20190523111634xlsx-style.full.min.js"></script>
<script src="https://upload.shinehao.com.cn/20180809110727FileSaver.min.js"></script>
<script src="https://upload.shinehao.com.cn/20180809110421Blob.js"></script>
<script src="../../static/excel/Export2Excel.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/sysCommonSearch.css"
  ], [
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/sysCommonSearch.js"
  ]);
  importTableColShowConfigFiles();

</script>
<script src="orderCostGlassesForm.js"></script>
<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    mixins: [tableColShowMixin('orderCostStat')],
    data: function () {
      // 搜索条件
      var search = {
        orderId: '',
        companyOrderId: '',
        factoryNo: '',
        customerNo: ''
      };
      return {
        loading: false,
        moment: moment,
        orderCostGlassesList: [],
        orderLineDetail: null,
        diaLogIsShow: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        }
      };
    },
    created: function () {
      this.setOrderCostGlasses(true);
    },
    methods: {
      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },
      searchData: function () {
        this.pagination.currentPage = 1;
        this.setOrderCostGlasses(true);
      },
      pageChange: function () {
        this.setOrderCostGlasses();
      },
      setOrderCostGlasses: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }
        var search = this.search;
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        }
        if (search.orderId !== '') {
          postData.orderId = search.orderId;
        }
        if (search.companyOrderId !== '') {
          postData.companyOrderId = search.companyOrderId;
        }
        if (search.factoryNo !== '') {
          postData.factoryNo = search.factoryNo;
        }
        if (search.customerNo !== '') {
          postData.customerNo = search.customerNo;
        }
        //开启loading
        this.loading = true;
        var self = this;
        //请求数据  
        ajaxRequest('orderCostFlasses/getCostClassesDetail', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var orderCostGlassesList = res.returnData;
          for (var i = 0; i < orderCostGlassesList.length; i++) {
            var obj = orderCostGlassesList[i];
            var glassesMoney = obj.glassesMoney;
            if (SysUtil.isEmpty(glassesMoney)) {
              glassesMoney = '';
            } else {
              glassesMoney = _.round(glassesMoney, 4);
            }
            obj.glassesMoney = glassesMoney;

            var glassesOrderMoney = obj.glassesOrderMoney;
            if (SysUtil.isEmpty(glassesOrderMoney)) {
              glassesOrderMoney = '';
            } else {
              glassesOrderMoney = _.round(glassesOrderMoney, 4);
            }
            obj.glassesOrderMoney = glassesOrderMoney;
          }

          self.orderCostGlassesList = orderCostGlassesList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },
      //行点击事件
      getOrderLineDetail: function (row) {
        this.orderLineDetail = row;
        this.diaLogIsShow = true;
      },

      exportExcel:function(){
        var postData = {};
        var search = this.oldSearch;
        if (search.orderId !== '') {
          postData.orderId = search.orderId;
        }
        if (search.companyOrderId !== '') {
          postData.companyOrderId = search.companyOrderId;
        }
        if (search.factoryNo !== '') {
          postData.factoryNo = search.factoryNo;
        }
        if (search.customerNo !== '') {
          postData.customerNo = search.customerNo;
        }

        var formParam = SysUtil.formatFormParam(postData);
        var basePath = SysUtil.getBasePath();
        var path = `${basePath}/orderCostFlasses/exportExcelOrderCostClasses?${formParam}`;
        window.open(path);
      }
    },
    components: {
      SearchBtnView: SearchBtnView,
      SysCommonSearch: SysCommonSearch,
      OrderCostGlassesForm: OrderCostGlassesForm
    }
  });

</script>

<style>
  .orderCostGlasses {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .orderCostGlasses .orderCostGlasses-table-div {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
